<script setup>
import { onMounted, ref } from 'vue'
import { DSMap } from '@/class/assist/DSMap.js'
import {
  AppIcon,
  AddIcon,
  RemoveIcon,
  MapAimingIcon,
  RocketIcon,
  Castle3Icon,
  City7Icon,
  MobileIcon,
  Move1Icon,
  ArrowLeftIcon,
  SearchIcon,
  LocationIcon,
  MapInformation2Icon,
  MapRoutePlanningIcon,
  Fingerprint3Icon
} from 'tdesign-icons-vue-next'
import RosePieCharts from './charts/RosePieCharts.vue'
import ScatterDiagram from './charts/ScatterDiagram.vue'
import { getCollegeInfoByRegion } from '../class/assist/DSMapDataApi'

const myMap = ref()
const map = ref(null)
const searchKeyword = ref('')
const top10College = ref([
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '香洲区'
    },
    address: '广东省珠海市香洲区金凤路18号',
    category: '教育学校:大学',
    point: {
      lat: 22.34923,
      lng: 113.539015
    },
    tel: '0756-3683393',
    title: '北京师范大学(珠海校区)',
    tId: '5131266768646384287'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '金湾区'
    },
    address: '广东省珠海市金湾区安基东路8号',
    category: '教育学校:大学',
    point: {
      lat: 22.050139,
      lng: 113.405948
    },
    tel: '0756-7626292',
    title: '吉林大学珠海学院',
    tId: '12126306112545573315'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '香洲区'
    },
    address: '广东省珠海市香洲区大学路2号',
    category: '教育学校:大学',
    point: {
      lat: 22.347856,
      lng: 113.587573
    },
    tel: '0756-3668129',
    title: '中山大学(珠海校区)',
    tId: '5199469812234474613'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '香洲区'
    },
    address: '广东省珠海市香洲区环岛东路与横琴大道交汇处东侧',
    category: '教育学校:大学',
    point: {
      lat: 22.126188,
      lng: 113.548951
    },
    tel: '00853-88228833',
    title: '澳门大学横琴校区(由澳门特别行政区实施管辖)',
    tId: '7880776768816906962'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '香洲区'
    },
    address: '广东省珠海市香洲区前山路206号',
    category: '教育学校:大学',
    point: {
      lat: 22.249942,
      lng: 113.534341
    },
    tel: '0756-8505338',
    title: '暨南大学(珠海校区)',
    tId: '2136540160355500796'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '香洲区'
    },
    address: '广东省珠海市香洲区唐家湾金同路2000号',
    category: '教育学校:大学',
    point: {
      lat: 22.34986,
      lng: 113.521227
    },
    tel: '0756-3620011;0756-3620022;0756-3620033',
    title: '北京师范大学香港浸会大学联合国际学院',
    tId: '2222176556140937392'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '金湾区'
    },
    address: '广东省珠海市金湾区珠海大道南侧',
    category: '教育学校:大学',
    point: {
      lat: 22.123384,
      lng: 113.353058
    },
    tel: '0756-7796111',
    title: '广东科学技术职业学院',
    tId: '16254635214877712690'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '金湾区'
    },
    address: '广东省珠海市金湾区590县道与玉兰路交叉口西240米',
    category: '教育学校:大学',
    point: {
      lat: 22.050448,
      lng: 113.40511
    },
    tel: '13797537794',
    title: '吉林大学(珠海校区)',
    tId: '14327059341209830235'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '金湾区'
    },
    address: '广东省珠海市金湾区广安路2号',
    category: '教育学校:大学',
    point: {
      lat: 22.136043,
      lng: 113.356022
    },
    tel: '0756-3982358',
    title: '珠海艺术职业学院',
    tId: '15215551211019200847'
  },
  {
    addressInfo: {
      province: '广东省',
      city: '珠海市',
      district: '金湾区'
    },
    address: '广东省珠海市金湾区金二路',
    category: '教育学校:大学',
    point: {
      lat: 22.132063,
      lng: 113.358846
    },
    tel: '0756-7253010',
    title: '珠海城市职业技术学院',
    tId: '17231459391471688967'
  }
])
const props = defineProps({
  width: {
    type: String,
    default: '760px'
  },
  height: {
    type: String,
    default: '570px'
  }
})

onMounted(() => {
  myMap.value = DSMap('container')
  map.value = myMap.value.map
  // getCollegeInfoByRegion('大学', 241000, { city: '珠海', ...map.value.getCenter() }).then((res) => {
  //   top10College.value = res
  //   console.log(top10College)
  // })
})

// 前往底盘点击学校
const goTopCollege = ({ lng, lat }) => map.value.panTo({ lng, lat })
// 放大缩小
const changeZoom = (prop) => {
  if (prop > 0) {
    map.value.zoomIn()
  } else {
    map.value.zoomOut()
  }
}
// 随机高度生成样式
const createRandomStyle = (max) => {
  function getRandomHeight(max) {
    let value = Math.floor(Math.random() * max)
    if (value < 7) value += 7
    if (value > max) value = max
    return value
  }
  return {
    height: getRandomHeight(max) + 'px'
  }
}
</script>

<template>
  <t-space>
    <div>
      <!-- 组件 -->
      <div class="map-setting">
        <t-button shape="square" variant="text" size="small">
          <template #icon><ArrowLeftIcon /></template>
        </t-button>
        <t-divider layout="vertical"></t-divider>
        <t-button shape="square" variant="text" size="small">
          <template #icon><SearchIcon /></template>
        </t-button>
      </div>
      <div class="map-background"></div>
      <div class="map-button">
        <t-button shape="square" variant="text" class="t-b" size="small">
          <template #icon>
            <p style="font-weight: 600">2D</p>
          </template>
        </t-button>
        <t-button shape="square" variant="text" class="t-b" size="small">
          <template #icon><AppIcon /></template>
        </t-button>
        <div class="t-b-container">
          <t-button shape="square" variant="text" size="small" @click="changeZoom(1)">
            <template #icon><AddIcon /></template>
          </t-button>
          <div class="line"></div>
          <t-button shape="square" variant="text" size="small" @click="changeZoom(-1)">
            <template #icon><RemoveIcon /></template>
          </t-button>
        </div>
        <div class="t-b-container">
          <t-button shape="square" variant="text" size="small">
            <template #icon><MapAimingIcon /></template>
          </t-button>
          <div class="line"></div>
          <t-button shape="square" variant="text" size="small">
            <template #icon><RocketIcon /></template>
          </t-button>
        </div>
      </div>
      <div class="map-nav">
        <t-button
          shape="square"
          variant="text"
          style="margin-right: auto; margin-left: 5px"
          size="small"
        >
          <template #icon> <Castle3Icon /> </template>
        </t-button>
        <div class="chart-container">
          <div v-for="(item, index) in top10College" :key="index" class="context">
            <t-popup>
              <div class="chart">
                <div
                  v-for="index in item.title.length"
                  :key="index"
                  style="
                    width: 2px;
                    margin: 1px;
                    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
                    margin-top: auto;
                    background: linear-gradient(to top, #828282, #a6a6a6);
                  "
                  :style="{
                    height: createRandomStyle(13).height
                  }"
                ></div>
              </div>
              <template #content>
                <t-card :bordered="false" size="small">
                  <template #title>
                    <t-space>
                      <City7Icon size="15px" />
                      <p style="font-size: 12px">{{ item.title }}</p>
                    </t-space>
                  </template>
                  <template #content>
                    <p style="font-size: 12px; color: #828282">{{ item.address }}</p>
                  </template>
                  <template #actions>
                    <t-button
                      variant="text"
                      theme="primary"
                      size="small"
                      @click="goTopCollege(item.point)"
                    >
                      <template #icon>
                        <Move1Icon />
                      </template>
                      前往高校
                    </t-button>
                  </template>
                  <template #footer>
                    <t-space style="color: #6a6a6a">
                      <t-tag theme="success" variant="outline" size="small" style="font-size: 8px">
                        {{ item.category }}
                      </t-tag>
                      <p style="font-size: 13px">
                        <MobileIcon />
                        {{
                          item.tel.length !== 0
                            ? item.tel.split(';').length === 1
                              ? item.tel
                              : item.tel.split(';')[0]
                            : '无'
                        }}
                      </p>
                    </t-space>
                  </template>
                </t-card>
              </template>
              <p class="text">{{ item.title }}</p>
            </t-popup>
          </div>
        </div>
      </div>
      <div ref="map" id="container" :style="{ width: props.width, height: props.height }"></div>
    </div>
    <t-space direction="vertical">
      <t-card :bordered="false" size="small" style="width: 265px">
        <template #title>
          <MapInformation2Icon size="18px" /><b style="margin: 0px 10px">珠海市</b>
        </template>
        <template #subtitle>
          <p style="font-size: 10px; color: #b1b1b1">广东省珠海市香洲区</p>
        </template>
        <template #actions>
          <t-button size="small" variant="text" theme="primary">
            <template #icon>
              <LocationIcon />
            </template>
            <b>更换城市</b>
          </t-button>
        </template>
        <template #content>
          <RosePieCharts />
          <ScatterDiagram :data="top10College" />
          <p class="center" style="margin-bottom: 10px">
            <MapRoutePlanningIcon size="18px" />
            <b style="font-size: 15px; margin: 0px 10px; margin-right: auto">珠海科技学院</b>
          </p>
          <t-input
            type="password"
            size="small"
            placeholder="请输入高校密匙"
            style="margin-top: 20px"
          >
            <template #prefix-icon>
              <Fingerprint3Icon />
            </template>
          </t-input>
          <div class="center" style="margin-left: auto; margin-top: 20px">
            <t-button theme="primary" size="small" style="margin-left: auto">确认所选高校</t-button>
            <t-button theme="default" size="small" variant="outline" style="margin-left: 10px">
              取消高校注册
            </t-button>
          </div>
        </template>
      </t-card>
    </t-space>
  </t-space>
  <t-drawer
    :visible="false"
    show-in-attached-element
    :sizeDraggable="true"
    :show-overlay="false"
    size="390px"
    :footer="false"
    header="地图检索"
    :closeBtn="true"
  >
    <t-auto-complete
      v-model="searchKeyword"
      :options="top10College"
      placeholder="请输入关键词搜索"
      highlight-keyword
      filterable
    >
      <template #suffixIcon>
        <t-button shape="square"><SearchIcon /></t-button>
      </template>
    </t-auto-complete>
  </t-drawer>
</template>

<style lang="scss" scoped>
@import '../style/common.scss';
.map-button {
  position: absolute;
  z-index: 1000;
  margin: 20px 5px;
  margin-top: 352px;
  margin-left: 725px;
  @include cf;
  flex-direction: column;

  .t-b {
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: 2px 0px;
  }

  .t-b-container {
    @include cf;
    flex-direction: column;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin: 2px 0px;
    border-radius: 3px;

    .line {
      width: 60%;
      height: 1px;
      margin: 1px 0;
      border-radius: 50%;
      background-color: rgb(217, 217, 217);
    }
  }
}

.map-nav {
  position: absolute;
  z-index: 1000;
  width: 740px;
  height: 35px;
  margin-top: 523px;
  margin-left: 8px;
  background-color: white;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 3px;
  @include cf;
  flex-direction: row;

  .chart-container {
    @include cf;
    flex-direction: row;
    width: 700px;

    .context {
      @include cf;
      flex-direction: column;
      margin-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100px;

      .chart {
        @include cf;
        display: flex;
        flex-direction: row;
      }

      .text {
        @include cf;
        flex-direction: row;
        line-height: 100%;
        font-size: 6px;
        margin: 1px 0;
        margin-top: 3px;
      }
    }
  }
}

.map-background {
  position: absolute;
  z-index: 999;
  width: 760px;
  height: 35px;
  background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(222, 222, 222, 0) 100%);
  background-clip: text;
  color: transparent;
}

.map-setting {
  position: absolute;
  z-index: 1000;
  margin: 5px 0px;
  padding: 3px 5px;
  background-color: rgb(255, 255, 255);
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 7px 29px 0px;
  @include cf;
}

.center {
  @include cf;
}
</style>
